<template>
    <ul>
      <li v-for="item in newfilms" :key="item.filmId">
        <img :src="item.poster" alt="" @click="handleClick(item.filmId)">
        <div>
          <h5>{{item.name}}</h5>
          <p>观众评分：<span class="span">{{item.grade}}</span></p>
          <p class="fname">主演：<span  v-for="items in item.actors" :key="items.name">{{items.name}} </span></p>
          <p>{{item.nation}}|{{item.runtime}}分钟</p>
        </div>
      </li>
    </ul>
</template>

<script>
import http from '@/util/http'
export default {
  data () {
    return {
      newfilms: []
    }
  },
  methods: {
    handleClick (id) {
      this.$router.push(`/Nowlist/${id}`) // 切换页面
    }
  },
  mounted () {
    http.request({
      url: 'gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=4325860',
      headers: {
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res => {
      this.newfilms = res.data.data.films
      console.log(this.newfilms)
    })
  }
}
</script>

<style lang="scss" scoped>
    ul{
       width: 100%;
       li{
           display: flex;
           letter-spacing: 1px;
           margin-top: 10px;
           margin-bottom: 20px;
           img{
               width: 70px;
               margin-left: 20px
           }
           div{
               margin-left: 10px;
               p{
                 font-size: 12px;
                 color: #666;
                 padding-top: 10px;
                 .span{
                     color:orangered;
                 }
               }
           }
           .fname{
                width: 160px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
        }
    }
</style>
